<?php
App::import('Model', 'Categoria');
$modeloCategorias = new Categoria();
?>
<link href="<?php echo $this->webroot; ?>css/nv.d3.css" rel="stylesheet" type="text/css">
<style>

    body {
        overflow-y:scroll;
    }

    text {
        font: 12px sans-serif;
    }

    svg {
        display: block;
    }

    #chart1 svg{
        height: 300px;
        min-width: 100px;
        min-height: 100px;
        /*
          margin: 10px;
          Minimum height and width is a good idea to prevent negative SVG dimensions...
          For example width should be =< margin.left + margin.right + 1,
          of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
        */
    }

</style>

<div class="wrapper">
    <div class="widget">
        <div class="whead"><h6>REPORTE GRAFICO DE VENTAS</h6><div class="clear"></div></div>

        <div id="chart1">
            <svg></svg>
        </div>

    </div>

    <div class="clear"></div>

    <div class="widget">
        <div class="whead"><h6>DATOS DE LAS VENTAS</h6><div class="clear"></div></div>
        <table cellpadding="0" cellspacing="0" border="0" class="dTable">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Codigo</th>
                    <th>Producto</th>
                    <th>Fecha</th>
                    <th>Cliente</th>
                    <th>Monto</th>                    
                </tr>
            </thead>
            <tbody>
                <tr>
                <?php $i=1; foreach ($datosVentas as $dv): ?>
                    <td><?php echo $i; $i++; ?></td>
                    <td><?php echo $dv['Movimientostubo']['codigo']; ?></td>
                    <td><?php echo $dv['Tubo']['nombre']; ?></td>
                    <td><?php echo $dv['Movimientostubo']['modified']; ?></td>
                    <td><?php echo $dv['Movimientostubo']['cliente']; ?></td>
                    <td><?php echo $dv['Movimientostubo']['precio_venta']; ?></td>                    
                </tr>
              
            <?php endforeach; ?>                
            </tbody>
        </table>        
    </div>     
</div>
<script src="<?php echo $this->webroot; ?>js/graficos/lib/d3.v2.js"></script>
<script src="<?php echo $this->webroot; ?>js/nv.d3.js"></script>
<!-- including all the components so I don't have to minify every time I test in development -->
<script src="<?php echo $this->webroot; ?>js/graficos/src/tooltip.js"></script>
<script src="<?php echo $this->webroot; ?>js/graficos/src/utils.js"></script>
<script src="<?php echo $this->webroot; ?>js/graficos/src/models/axis.js"></script>
<script src="<?php echo $this->webroot; ?>js/graficos/src/models/discreteBar.js"></script>
<script src="<?php echo $this->webroot; ?>js/graficos/src/models/discreteBarChart.js"></script>
<?php
$categoria1 = $ventas[0]['movimientostubos']['categoria_id'];

$consultaCategoria1 = $modeloCategorias->find('first', array(
    'recursive' => -1,
    'conditions' => array('Categoria.id' => $categoria1)
        ));
if (!empty($consultaCategoria1)) {
    $categoriaReporte1 = $consultaCategoria1['Categoria']['nombre'];
    $total1 = $ventas[0][0]['total'];
} else {
    $categoriaReporte1 = 'SIN VENTAS';
    $total1 = 0;
}

$categoria2 = $ventas[1]['movimientostubos']['categoria_id'];

$consultaCategoria2 = $modeloCategorias->find('first', array(
    'recursive' => -1,
    'conditions' => array('Categoria.id' => $categoria2)
        ));
if (!empty($consultaCategoria2)) {
    $categoriaReporte2 = $consultaCategoria2['Categoria']['nombre'];
    $total2 = $ventas[1][0]['total'];
} else {
    $categoriaReporte2 = 'SIN VENTAS';
    $total2 = 0;
}

$categoria3 = $ventas[2]['movimientostubos']['categoria_id'];

$consultaCategoria3 = $modeloCategorias->find('first', array(
    'recursive' => -1,
    'conditions' => array('Categoria.id' => $categoria3)
        ));
if (!empty($consultaCategoria3)) {
    $categoriaReporte3 = $consultaCategoria3['Categoria']['nombre'];
    $total3 = $ventas[2][0]['total'];
} else {
    $categoriaReporte3 = 'SIN VENTAS';
    $total3 = 0;
}

//debug($categoriaReporte1);
//debug($categoriaReporte2);
//debug($categoriaReporte3);
//debug($total1);
//debug($total2);
//debug($total3);
?>

<script>
    historicalBarChart = [
        {
            key: "Cumulative Return",
            values: [
                {
                    "label": "<?php echo $categoriaReporte1; ?>",
                    "value": <?php echo $total1; ?>
                },
                {
                    "label": "<?php echo $categoriaReporte2; ?>",
                    "value": <?php echo $total2; ?>
                },
                {
                    "label": "<?php echo $categoriaReporte3; ?>",
                    "value": <?php echo $total3; ?>
                }
            ]
        }
    ];

    nv.addGraph(function() {
        var chart = nv.models.discreteBarChart()
                .x(function(d) {
            return d.label
        })
                .y(function(d) {
            return d.value
        })
                .staggerLabels(true)
                //.staggerLabels(historicalBarChart[0].values.length > 8)
                .tooltips(true)
                .showValues(true)

        d3.select('#chart1 svg')
                .datum(historicalBarChart)
                .transition().duration(800)
                .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });


</script>
